<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>${pageTitle}</title>

    <meta name="description" content="User login page"/>
    <link rel="shortcut icon" href="${resRoot}/css/images/16anji.png"/>
    <link rel="stylesheet" href="${resRoot}/css/style.css?fs=1.1.1" type="text/css" media="all"/>
    <script type="text/javascript" src="${resRoot}/js/jquery-1.4.2.js"></script>
    <script src="${resRoot}/js/jquery.jcarousel.js" type="text/javascript"></script>
    <script src="${resRoot}/js/js-func.js" type="text/javascript"></script>
    <style>
        .mesWindow {
            background: rgb(36, 50, 55);
            background: rgba(36, 50, 55, 0.8);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f243237, endColorstr=#7f243237);
            padding: 15px 20px;
            padding-bottom: 20px;
            color: #efefef;
            color: rgba(255, 255, 255, 0.8);
            margin: 0 auto;
            font-family: "微软雅黑";
        }

        .mesWindowTop {
            font-size: 24px;
        }

        .mesWindowContent {
            margin: 4px;
            font-size: 14px;
            z-index: 999
        }

        .mesWindow
        .close {
            border: none;
            cursor: pointer;
            color: #fff;
            font-size: 16px;
            background: #333;
            padding: 0.6em 1em;
            width: auto;
        }

        #loginTab {
            font-size: 14px;
        }

        .active {
            border: none
        }
    </style>
    <script>
        var loginWindow = false;
        var isIe = (document.all) ? true : false;
        //设置select的可见状态
        function setSelectState(state) {
            var objl = document.getElementsByTagName('select');
            for (var i = 0; i < objl.length; i++) {
                objl[i].style.visibility = state;
            }
        }
        function mousePosition(ev) {
            if (ev.pageX || ev.pageY) {
                return {x: ev.pageX, y: ev.pageY};
            }
            return {
                x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y: ev.clientY + document.body.scrollTop - document.body.clientTop
            };
        }
        //弹出方法
        function showMessageBox(wTitle, content, pos, wWidth) {
            closeWindow();
            var bWidth = parseInt(document.documentElement.scrollWidth);
            var bHeight = parseInt(document.documentElement.scrollHeight);
            if (isIe) {
                setSelectState('hidden');
            }
            var back = document.createElement("div");
            back.id = "back";
            var styleStr = "top:0px;left:0px;position:absolute;background:#666;width:" + bWidth + "px;height:" + bHeight + "px;";
            styleStr += (isIe) ? "filter:alpha(opacity=0);" : "opacity:0;";
            back.style.cssText = "z-index:100;" + styleStr;
            document.body.appendChild(back);
            showBackground(back, 50);
            var mesW = document.createElement("div");
            mesW.id = "mesWindow";
            mesW.className = "mesWindow";
            mesW.innerHTML = "<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>" + wTitle + "</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='X' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>" + content + "</div><div class='mesWindowBottom'></div>";
            styleStr = "left:" + (((pos.x - wWidth) > 0) ? (pos.x - wWidth - 150) : pos.x) + "px;top:" + 150 + "px;position:absolute;width:" + wWidth + "px;";
            mesW.style.cssText = "z-index:101;" + styleStr;
            document.body.appendChild(mesW);
        }
        //让背景渐渐变暗
        function showBackground(obj, endInt) {
            if (isIe) {
                obj.filters.alpha.opacity += 1;
                if (obj.filters.alpha.opacity < endInt) {
                    setTimeout(function () {
                        showBackground(obj, endInt)
                    }, 5);
                }
            } else {
                var al = parseFloat(obj.style.opacity);
                al += 0.01;
                obj.style.opacity = al;
                if (al < (endInt / 100)) {
                    setTimeout(function () {
                        showBackground(obj, endInt)
                    }, 5);
                }
            }
        }
        //关闭窗口
        function closeWindow() {
            loginWindow = false;
            if (document.getElementById('back') != null) {
                document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
            }
            if (document.getElementById('mesWindow') != null) {
                document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
            }
            if (isIe) {
                setSelectState('');
            }
        }
        //测试弹出
        function testMessageBox(ev) {
            var objPos = mousePosition(ev);
            messContent = "<div style='padding:20px 0 20px 0;text-align:center'>" +
            '<form id="loginForm"  method="post">' +
            '<table width="100%" border="0" id="loginTab">' +
            '<tr><td colspan="3" height="35"><label id="error_msg" class="inline red" style="font-size:10pt;"></label></td></tr>' +
            "<tr>" +
            "<td width='20%' height='35' align='right' nowrap='nowrap'>用户名：</td>" +
            "<td width='75%'  align='left'><input name='userName' id='userName' type='text' onkeypress='getKey();'/></td>" +
            "<td width='5%'>&nbsp;</td></tr>" +
            "<tr>" +
            "<td height='35' align='right' nowrap='nowrap'>密码：</td>" +
            "<td align='left'> <input type='password' name='pwd' id='pwd' onkeypress='getKey();'/></td>" +
            "<td>&nbsp;</td></tr>" +
            "<tr>" +
            "<td width='20%' height='35' align='right' nowrap='nowrap'>验证码：</td>" +
            '<td width="50%" align="left"><input type="text" name="validCode" id="validCode" style="width:160px" onkeypress="getKey();"/>'
            + '&nbsp;&nbsp;&nbsp;&nbsp;<img id="vimg" src="" alt="验证码加载中" align="top" onclick="changeImg(this);" title="看不清楚，点击换一张" border="0" width="60" height="30" style="padding-top:2px"/>'
            + '</td>' +
            '<td width="30%">' +
            '</td></tr>' +
            "<tr>" +
            '<td>&nbsp;</td>' +
            "<td height='50' align='left' nowrap='nowrap'>" +
            "<input type='button' id='submitBtn' name='Submit' value=' 登 录 ' onclick='userLogin();' class='oButton' /></td>" +
            "<td>&nbsp;</td></tr>" +
            "</table>" +
            "</form>" +
            "</div>";
            showMessageBox('系统登录', messContent, objPos, 450);
            changeImg($("#vimg")[0]);
            loginWindow = true;
        }
    </script>
    <script type="text/javascript">
        function changeImg(field) {
            field.src = "validImg.htm?i=" + new Date().getTime();
        }
        if (window.parent != self) {
            alert('session已过期，请重新登录');
            window.parent.parent.location.href = 'login.htm';
        }
    </script>
</head>

<body>
<div id="header">
    <div class="shell">
        <h1 id="logo" class="notext">
            <a href="http://www.anji-logistics.com/" target="_blank"></a>
        </h1>
        <input name="Input2" type="button" class="oButton" value="立即登录"
               onclick="testMessageBox(event);"
               style="float:right"/>
    </div>
</div>

<div id="slider">
    <div class="shell">
        <div class="slider-holder">
            <div class="slider-left">
                <ul>
                    <li>
                        <h2>灿谷管理</h2>

                        <p>
                            中国领先的汽车金融科技服务平台</p>
                    </li>
                    <li>
                        <h2>金融机构</h2>

                        <p>
                            灿谷为金融机构提供从获客、线下服务到贷后管理的全流程、端对端服务，助其提升运营效率和信贷表现。</p>
                    </li>
                    <li>
                        <h2>汽车经销商</h2>

                        <p>
                            灿谷为汽车经销商提供涵盖新车及二手车车源寻找、汽车金融解决方案提供、基于经销商管理系统的供应链融资和存货管理的全流程服务，助其显著提升运营表现。</p>
                    </li>
                    <li>
                        <h2>购车客户</h2>

                        <p>
                            灿谷协助购车客户获取优质汽车金融产品和服务，并在其购车过程中提供涵盖交易、落地及车后产品的一站式服务。</p>
                    </li>
                    <li>
                        <h2>汽车后市场服务供应商</h2>

                        <p>
                            基于灿谷的平台化运营模式及汽车金融交易场景，在原有汽车金融服务基础上挖掘更多其他金融产品及服务的交叉销售机会，从而有力促进车后市场服务供应商的业务拓展。</p>
                    </li>
                    <li>
                        <h2>主机厂</h2>

                        <p>
                            通过灿谷广泛的经销商网络，提升其网络覆盖；同时通过优质的汽车金融解决方案，有力促进其汽车销售。</p>
                    </li>
                </ul>
            </div>
            <div class="slider-right">
                <ul>
                    <li><img src="${resRoot}/css/images/banner_1.jpg"  alt=""/></li>
                    <li><img src="${resRoot}/css/images/banner_3.jpg"  alt=""/></li>
                    <li><img src="${resRoot}/css/images/banner_5.jpg" alt=""/></li>
                    <li><img src="${resRoot}/css/images/banner_6.jpg"  alt=""/></li>
                    <li><img src="${resRoot}/css/images/banner_4.jpg" alt=""/></li>
                    <li><img src="${resRoot}/css/images/banner_1.jpg"  alt=""/></li>
                </ul>
            </div>
            <div class="cl">&nbsp;</div>
            <div class="slider-nav">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <div class="cl">&nbsp;</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="${resRoot }/js/jQuery.md5.js"></script>
<!-- Ajax表单提交JS导入 -->
<script src="${resRoot}/js/jquery.form.js"></script>
<script>
    $(function () {
        //$("#btn_login").click(userLogin);
    });
    $(document).ready(function () {
        /*document.onkeydown = function(event) {
         if(e && e.keyCode == 13 && loginWindow){
         userLogin();
         }
         };*/
    });

    //键盘监听登录
    function getKey() {
        if (event.keyCode == 13) {
            userLogin();
        }
    }
    function userLogin() {
        var userName = $.trim($("#userName").val());
        var pwd = $.trim($("#pwd").val());
        var validCode = $.trim($("#validCode").val());
        if (null == userName || '' == userName || null == pwd || '' == pwd) {
            $("#error_msg").html("用户名和密码不能为空");
            return;
        }
        if (null == validCode || '' == validCode) {
            $("#error_msg").html("验证码码不能为空");
            return;
        }
        $("#pwd").val($.md5(pwd));
//        $("#loginForm").attr('action','login.htm');
        $("#submitBtn").attr("disabled", true);
        $("#loginForm").ajaxSubmit({
            url: "${pageContext.request.contextPath}/loginin.json",
            data: $('#loginForm').formSerialize(),
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                if (data.status == 200) {
                    location.href = "${pageContext.request.contextPath}/index.htm";
                } else if (data.status == 500) {
                    $("#pwd").val('');
                    $("#error_msg").html(data.errorMsg);
                    changeImg($("#vimg")[0]);
                }
                //启用按钮
                $("#submitBtn").removeAttr("disabled");
            },
            error: function (data) {
                //启用按钮
                $("#submitBtn").removeAttr("disabled");
            }
        });
    }
</script>
<!--
<div id="footer">
    <div class="shell">
        <p class="left"></p>

        <p class="right">
            韩伟
        </p><br>

        <p class="right">
            沪ICP备14000481号-6
        </p>

        <div class="cl">&nbsp;</div>
    </div>
</div>
-- >
</body>
</html>

